import React from 'react'
import ReactDom from 'react-dom'
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
import { deepOrange, blue } from 'material-ui/colors'
import { AppContainer } from 'react-hot-loader'
import { Provider } from 'mobx-react'
import Root from './root'
import createStores from './stores/create_stores'

const stores = createStores()
const theme = createMuiTheme({
  palette: {
    primary: deepOrange,
    accent: blue,
    type: 'light',
  },
})
const createClientApp = (TheApp) => {
  class ClientApp extends React.Component {
    componentDidMount() {
      const jssStyles = document.getElementById('jss-style')
      if (jssStyles && jssStyles.parentNode) {
        jssStyles.parentNode.removeChild(jssStyles)
      }
    }

    render() {
      return <TheApp />
    }
  }

  return ClientApp
}
const render = (Component) => {
  ReactDom.hydrate(
    <Provider {...stores}>
      <AppContainer>
        <MuiThemeProvider theme={theme}>
          <Component />
        </MuiThemeProvider>
      </AppContainer>
    </Provider>,
    document.getElementById('app'),
  )
}
render(createClientApp(Root))
if (module.hot) {
  module.hot.accept('./root.jsx', () => {
    const nextApp = require('./root.jsx').default;
    render(nextApp)
  })
}
